
import React from 'react';

type IconProps = React.SVGProps<SVGSVGElement> & {
  isThinking?: boolean;
};

export const BotIcon: React.FC<IconProps> = ({ isThinking, ...props }) => (
  <svg
    viewBox="0 0 32 32"
    xmlns="http://www.w3.org/2000/svg"
    // Use a data-attribute to control animation states via CSS
    data-thinking={!!isThinking}
    {...props}
  >
    <defs>
      {/* Replaced non-standard conicGradient with a standard linearGradient to fix rendering errors */}
      <linearGradient id="rainbow-linear-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stopColor="#ff2a2a" />
        <stop offset="16.66%" stopColor="#ff7a00" />
        <stop offset="33.33%" stopColor="#fff200" />
        <stop offset="50%" stopColor="#55ff00" />
        <stop offset="66.66%" stopColor="#00aaff" />
        <stop offset="83.33%" stopColor="#8A2BE2" />
        <stop offset="100%" stopColor="#ff2a2a" />
      </linearGradient>
    </defs>
    <style>
      {`
        /* This animation rotates the circle, making the linear gradient appear to spin */
        @keyframes gradient-spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
        }
        @keyframes breathing-idle {
          0%, 100% { transform: scale(0.95); opacity: 0.9; }
          50% { transform: scale(1); opacity: 1; }
        }
        @keyframes breathing-active {
          0%, 100% { transform: scale(0.92); opacity: 0.8; }
          50% { transform: scale(1.08); opacity: 1; }
        }
        .ring-container {
          transform-origin: center;
          /* Breathing animation is applied to the group */
          animation-name: breathing-idle;
          animation-duration: 3s;
          animation-timing-function: ease-in-out;
          animation-iteration-count: infinite;
        }
        .gradient-ring {
          stroke: url(#rainbow-linear-gradient);
          transform-origin: center;
          /* Spin animation is applied to the circle itself */
          animation: gradient-spin 5s linear infinite;
        }
        svg[data-thinking='true'] .ring-container {
          animation-name: breathing-active;
          animation-duration: 1.2s;
        }
        svg[data-thinking='true'] .gradient-ring {
          /* Faster spin when thinking */
          animation-duration: 2s;
        }
      `}
    </style>
    <g className="ring-container">
      <circle
        className="gradient-ring"
        cx="16"
        cy="16"
        r="12"
        fill="none"
        strokeWidth="3.5"
      />
    </g>
  </svg>
);


export const UserIcon: React.FC<IconProps> = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path fillRule="evenodd" d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm-2 2a9 9 0 0 0-7 4.89V21a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-2.11A9 9 0 0 0 14 14H10Z" clipRule="evenodd" />
  </svg>
);

export const SendIcon: React.FC<IconProps> = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" {...props}>
    <path d="M3.478 2.405a.75.75 0 0 0-.926.94l2.432 7.905H13.5a.75.75 0 0 1 0 1.5H4.984l-2.432 7.905a.75.75 0 0 0 .926.94 60.519 60.519 0 0 0 18.445-8.986.75.75 0 0 0 0-1.218A60.517 60.517 0 0 0 3.478 2.405Z" />
  </svg>
);

export const CopyIcon: React.FC<IconProps> = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m9.75 0h-3.375c-.621 0-1.125.504-1.125 1.125v6.5c0 .621.504 1.125 1.125 1.125h3.375c.621 0 1.125-.504 1.125-1.125v-6.5c0-.621-.504-1.125-1.125-1.125Z" />
  </svg>
);

export const CheckIcon: React.FC<IconProps> = (props) => (
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" {...props}>
    <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
  </svg>
);
